<template>
  <div>
    <el-form :inline="true" :model="form" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12" :offset="5">
          <div class="grid-content bg-purple">
            <el-form-item label="IP" :label-width="labelWidth">
              <el-input v-model="form.sourceIp" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="MAC地址" :label-width="labelWidth">
              <el-input v-model="form.sourceHardware" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="网关" :label-width="labelWidth">
              <el-input v-model="form.gatway" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="子网掩码" :label-width="labelWidth">
              <el-input v-model="form.subnetMask" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updateNetDeviceConfig">确 定</el-button>
      <el-button @click="dialogFormVisible">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import deviceApi from "@/api/device";
  export default {
    name: "NetEdit",
    props: {
      deviceCode: 0,
    },
    inject: ['closeEdit'],
    data() {
      return {
        loading: false,
        labelWidth: "160px",
        form: {},
        devInfo: {},
      };
    },
    computed: {},
    created() { },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let root = this;
        root.loading = true;
        deviceApi.getNetConfig(this.deviceCode).then(
          (response) => {
            root.loading = false;
            if (response.data) {
              this.form = response.data;
            }
          },
          (err) => {
            root.loading = false;
          }
        );
      },
      updateNetDeviceConfig() {
        let root = this;
        this.loading = true;
        // 点击确定时主页编辑按钮变灰
        this.closeEdit(this.deviceCode, true);
        deviceApi.updateNetConfig(this.deviceCode, this.form).then(
          (response) => {
            root.loading = false;
            root.dialogFormVisible();
            this.$message({
              message:
                "更新网络配置命令已下发，设备正在重启，大约需要一分钟。",
              type: "success",
            });
          },
          (err) => {
            root.loading = false;
          }
        );
      },
      dialogFormVisible() {
        this.$parent.$parent.$parent.hide();
      },
    },
  };
</script>
<style>
  .device-list-charts {
    text-align: left;
    margin-top: 20px;
  }

  .device-list-pagination {
    margin-top: 30px;
  }
</style>